<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>房屋添加页面</title>
    <link rel="stylesheet" href="../../../yl/index.css" />
    <!-- 布局样式 -->
    <link rel="stylesheet" href="../../../yl/style.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../yl/mobile.css" />
    <link rel="stylesheet" href="../../../yl/easyui.css" />
    <link rel="stylesheet" href="../../../yl/icon.css" />
    <style>
        .Layer .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__content{
            padding: 12px 0 0 15px !important;
        }
    </style>
</head>

<body>
    <!-- <div id="app"> -->
    <div class="easyui-navpanel" id="app" v-cloak>
        <header>
            <div class="m-toolbar">
                <div class="m-title">{{action=='Add'?'关联房屋':action=='Modify'?'修改蓝牌信息':''}}</div>
            </div>
        </header>
        <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px">
            <div class="yl-main">
                <div class="table_titel">
                  <div class="titel">蓝牌信息</div>
                </div>
                <el-descriptions :column="1" size="large" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">蓝牌编号</div>
                        </template>
                        <el-input disabled v-model.trim="dataForm.Blue_Plate_SerialNumber" class="borderless-input"
                            placeholder="请输入蓝牌编号" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">蓝牌名称</div>
                        </template>
                        <el-input disabled v-model.trim="dataForm.Blue_Plate_Name" class="borderless-input"
                            placeholder="请输入蓝牌名称" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">蓝牌类型</div>
                        </template>
                        <el-select disabled clearable v-model.trim="dataForm.Plate_Type_SerialNumber" placeholder="请选择蓝牌类型"
                            filterable style="width: 100%">
                            <el-option v-for="(item,index) in ['居民户','商户','企业']" :key="index" :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">省/市/区(县)</div>
                        </template>
                        <el-cascader disabled @change="changeCity" v-model="cityValue" filterable class="borderless-input"
                            :props="{value:'value',label:'label',children:'children'}" placeholder="请选择省/市/区(县)"
                            :options="city" style="width: 100%"></el-cascader>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">乡镇(街道)/村庄(社区)</div>
                        </template>
                        <el-cascader disabled @change="changeCity1" class="borderless-input" v-model="cityValue1" filterable
                            :props="{value:'ProvinceNumber',label:'Province',children:'children'}"
                            placeholder="请选择乡镇(街道)/村庄(社区)" :options="city1" style="width: 100%"></el-cascader>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">详细地址</div>
                        </template>
                        <el-input disabled v-model.trim="dataForm.Address" class="borderless-input" placeholder="请输入详细地址" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">蓝牌坐标集</div>
                        </template>
                        <el-input disabled type="textarea" :autosize="{ minRows: 2}" v-model.trim="dataForm.Coords"
                            class="borderless-input" placeholder="请输入蓝牌坐标集" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">负责人</div>
                        </template>
                        <el-select disabled clearable v-model.trim="dataForm.Responsible_Person" placeholder="请选择负责人"
                            filterable style="width: 100%">
                            <el-option v-for="(item,index) in personal" :key="index" :label="item.Personal_Name"
                                :value="item.ID_Card_Number"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">联系电话</div>
                        </template>
                        <el-input disabled v-model.trim="dataForm.Contact_Phone" class="borderless-input"
                            placeholder="请输入联系电话" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">是否为自建房</div>
                        </template>
                        <el-input disabled :value="dataForm.Self_Built_Houses=='0'?'否':'是'" class="borderless-input"
                            placeholder="是否为自建房" />
                    </el-descriptions-item>
                </el-descriptions>
                <el-row :gutter="20">
                    <el-col :span="dataForm.Self_Built_Houses=='1'?8:24">
                        <div class="table_titel">
                            <div class="titel">{{dataForm.Self_Built_Houses=='0'?'楼房':'自建房'}}配置</div>
                        </div>
                        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                            <el-descriptions :column="3" size="large" border>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">{{dataForm.Self_Built_Houses=='0'?'单元数':'楼栋数'}} </div>
                                    </template>
                                    <el-form-item prop="Unit_Quantity"
                                        :rules="[{ required: true, message: '请输入' + (dataForm.Self_Built_Houses=='0'?'单元数':'楼栋数'), trigger: 'blur' }]">
                                        <el-input @input="Input_Unit_Quantity" v-model.trim="dataForm.Unit_Quantity" class="borderless-input"
                                            :placeholder="'请输入' + (dataForm.Self_Built_Houses=='0'?'单元数':'楼栋数') " />
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item v-if="dataForm.Self_Built_Houses=='0'">
                                    <template #label>
                                        <div class="cell-item">楼层数</div>
                                    </template>
                                    <el-form-item prop="Layer_Quantity"
                                        :rules="[{ required: true, message: '请输入层数', trigger: 'blur' }]">
                                        <el-input v-model.trim="dataForm.Layer_Quantity" class="borderless-input" placeholder="请输入层数" />
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item v-if="dataForm.Self_Built_Houses=='0'">
                                    <template #label>
                                        <div class="cell-item">房间数</div>
                                    </template>
                                    <el-form-item prop="Room_Quantity"
                                        :rules="[{ required: true, message: '请输入每层户数', trigger: 'blur' }]">
                                        <el-input v-model.trim="dataForm.Room_Quantity" class="borderless-input"
                                        placeholder="请输入每层户数" />
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-form>
                    </el-col>
                    <el-col :span="dataForm.Self_Built_Houses=='1'?8:0">
                        <div class="table_titel">
                            <div class="titel">每栋层数配置</div>
                        </div>
                        <el-form :model="{Layer}" ref="form2" :inline-message="true" style="width: 100%">
                            <el-descriptions :column="1" size="large" border v-for="(item,key) in Layer" :key="key">
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">{{key}}栋层数</div>
                                    </template>
                                    <el-form-item :prop="'Layer.' + key + '.Layer_Quantity'" :rules="[{ required: true, message: '请输入层数', trigger: 'blur'}]">
                                        <el-input @input="Input_Layer_Quantity($event,item)" v-model.trim="item.Layer_Quantity" class="borderless-input" placeholder="请输入层数" />
                                    </el-form-item>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">{{key}}栋房产证号</div>
                                    </template>
                                    <el-form-item :prop="'Layer.' + key + '.Real_Rstate_Number'" :rules="[{ required: true, message: '请输入房产证号', trigger: 'blur'}]">
                                        <el-input v-model.trim="item.Real_Rstate_Number" class="borderless-input" placeholder="请输入房产证号" />
                                    </el-form-item>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-form>
                    </el-col>
                    <el-col :span="dataForm.Self_Built_Houses=='1'?8:0">
                        <div class="table_titel">
                            <div class="titel">每层房间数配置</div>
                        </div>
                        <el-form :model="{Layer}" ref="form3" :inline-message="true" style="width: 100%">
                            <template v-for="(obj,key) in Layer" :key="key">
                                <el-descriptions :column="1" size="large" border v-for="(item,id) in obj.Room" :key="id">
                                    <el-descriptions-item>
                                        <template #label>
                                            <div class="cell-item">{{key}}栋{{id}}层房间数</div>
                                        </template>
                                        <el-form-item :prop="'Layer.' + key + '.Room.' + id + '.Room_Quantity'"  :rules="[{ required: true, message: '请输入房间数', trigger: 'blur'}]">
                                            <el-input v-model.trim="item.Room_Quantity" class="borderless-input" placeholder="请输入房间数" />
                                        </el-form-item>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </template>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="table_titel">
                    <div class="titel">房屋预览</div>
                </div>
                <el-descriptions v-if="dataForm.Self_Built_Houses=='1'" :column="1" size="large" border v-for="i in Number(dataForm.Unit_Quantity)" :key="i">
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">第{{i}}栋</div>
                        </template>
                        <el-descriptions class="Layer" :column="1" size="large" border v-for="x in Number(Layer[i].Layer_Quantity)" :key="x">
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">第{{x}}层</div>
                                </template>
                                <div style="display: flex; flex-wrap: wrap;">
                                    <div :style="{marginRight:z == Number(Layer[i].Room[x].Room_Quantity)?'0':'15px',backgroundColor:liveStatus(i,x,z) ? '#F56C6C' : '#f5f7fa'}"
                                        style="width: 200px;height: 50px;border: 1px solid #ebeef5;display: flex;justify-content: center;align-items: center;margin-bottom: 12px;cursor: pointer;" 
                                         v-for="z in Number(Layer[i].Room[x].Room_Quantity)" :key="z" @click="handleRoom(i,x,z)">
                                        <span :style="{color:liveStatus(i,x,z) ? '#ffffff':'#606266'}" style="font-weight: bold;font-size: 14px;">第{{z}}房间</span>
                                    </div>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions v-if="dataForm.Self_Built_Houses=='0'" :column="1" size="large" border v-for="i in Number(dataForm.Unit_Quantity)" :key="i">
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">第{{i}}单元</div>
                        </template>
                        <el-descriptions class="Layer" :column="2" size="large" border>
                            <el-descriptions-item v-for="x in Number(dataForm.Layer_Quantity)" :key="x">
                                <template #label>
                                    <div class="cell-item">第{{x}}层</div>
                                </template>
                                <div style="display: flex; flex-wrap: wrap;">
                                    <div :style="{marginRight:z == Number(dataForm.Room_Quantity)?'0':'15px',backgroundColor:liveStatus(i,x,z) ? '#F56C6C' : '#f5f7fa'}"
                                        style="width: 200px;height: 50px;border: 1px solid #ebeef5;display: flex;justify-content: center;align-items: center;margin-bottom: 12px;cursor: pointer;" 
                                         v-for="z in Number(dataForm.Room_Quantity)" :key="z" @click="handleRoom(i,x,z)">
                                        <span :style="{color:liveStatus(i,x,z) ? '#ffffff':'#606266'}" style="font-weight: bold;font-size: 14px;">第{{z}}房间</span>
                                    </div>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- <div class="table_titel">
                    <div class="titel">房屋图例</div>
                </div>
                <yl-house-grid :data="dataForm" :layer="Layer"  @node-click="handleRoom"></yl-house-grid>  -->
            </div>        
        </div>
        <footer class="botton-ann">
            <el-button @click="goBack">返回</el-button>
            <el-button type="primary" plain @click="handleSubmit">提交</el-button>
        </footer>
    </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/add2.js"></script>

</html>